<template>

  <div>
    <div class="w">
      <!-- 标题 -->
      <div class="title-area">
        <span>
          基本信息
        </span>
      </div>

      <!-- 主体内容显示区 -->
      <div class="content-area">

        <!-- 查询表单区 -->
        <div class="form-area">
          <Form
            name="queryForm"
            ref="queryForm"
            :labelCol="{span: 5, offset: 0}"
            :initialValues="{}">

            <Row :gutter="16">
              <Col :span="8">
                <div class="formGrid">
                  <FormItem name="code" label="方案编码" initialValue="">
                    <Input placeholder="请输入方案编码" style="width: 70%" />
                  </FormItem>
                </div>
              </Col>
              <Col :span="8">
                <div class="formGrid">
                  <FormItem name="name" label="方案名称" initialValue="">
                    <Input placeholder="请输入方案名称" style="width: 70%" />
                  </FormItem>
                </div>
              </Col>
              <Col :span="8">
                <div class="formGrid">
                  <FormItem name="programmeType" label="方案类型" initialValue="">
                    <Select
                      placeholder="请选择方案类型"
                      style="width: 70%"
                      allowClear>
                      <Option key="1" value="single" label="单机" />
                      <Option key="2" value="ha" label="高可用" />
                      <Option key="3" value="rw" label="读写分离" />
                    </Select>
                  </FormItem>
                </div>
              </Col>
              <Col :span="8">
                <div class="formGrid">
                  <FormItem name="appType" label="应用类型" initialValue="">
                    <Select
                      placeholder="请选择应用类型"
                      style="width: 70%"
                      allowClear>
                      <Option key="1" value="OA" label="OA" />
                      <Option key="2" value="ERP" label="ERP" />
                      <Option key="3" value="平台" label="平台" />
                    </Select>
                  </FormItem>
                </div>
              </Col>
              <Col :span="8">
                <div class="formGrid">
                  <FormItem name="product" label="产品" initialValue="">
                      <Cascader style="width: 70%" placeholder="请选择厂商产品" :options="options" />
                  </FormItem>
                </div>
              </Col>
            </Row>
            <Row :gutter="16">
                <TextArea placeholder="请输入解决方案说明" style="width: 100%; height: 100px; margin-top: 15px;" />
            </Row>
          </Form>
        </div>
      </div>
    </div>

    <div class="w" style="margin-top: 5px;">
      <!-- 标题 -->
      <div class="title-area">
        <span>
          步骤管理
        </span>
      </div>

      <!-- 主体内容显示区 -->
      <div class="content-area">
        <Table
          style="margin-top: 20px"
          :columns="tableColumns"
          :dataSource="tableData"
          :bordered="false"
          :rowKey="(record) => record.key"
          :pagination="false">
        </Table>

        <Row style="margin-top: 40px;">
          <Col :span="12" :offset="9">
              <Button style="width: 100px;" type="primary" @click="submit">提 交</Button>
              <Button style="width: 100px; margin-left: 20px;" @click="cancel">取 消</Button>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: "app",
    data: function () {
      return {
        options: [
            {
              value: 'kb',
              label: '金仓股份有限公司',
              children: [
                  { value: 'v1', label: 'v1.0 企业版' },
                  { value: 'v2', label: 'v2.0 企业版' },
                  { value: 'v1s', label: 'v1.0 安全版' }
              ]
            },
            {
              value: 'dm',
              label: '达梦股份有限公司',
              children: [
                  { value: 'v1', label: 'v1.0 企业版' },
                  {  value: 'v2', label: 'v2.0 企业版' }
              ]
            },
            {
              value: 'hg',
              label: '瀚高基础软件',
              children: [
                  { value: 'v1', label: 'v1.0 企业版' },
                  { value: 'v1s', label: 'v1.0 安全版' }
              ]
            }
        ],
        tableData: [
          { "id":"1", "step":"应用评估", "shortDesc":"应用评估描述...", "attachment":"(5)", "desc":"步骤方案说明...", "operation":"删除" },
          { "id":"2", "step":"迁移测试", "shortDesc":"应用评估描述...", "attachment":"(2)", "desc":"步骤方案说明...", "operation":"删除" },
          { "id":"3", "step":"迁移实施", "shortDesc":"应用评估描述...", "attachment":"(1)", "desc":"步骤方案说明...", "operation":"删除" },
          { "id":"4", "step":"数据验证", "shortDesc":"应用评估描述...", "attachment":"(3)", "desc":"步骤方案说明...", "operation":"删除" },
        ],
        tableColumns: [
          {"title":"编号", "dataIndex":"id", "key":"id", width: 60},
          {"title":"步骤", "dataIndex":"step", "key":"step", width: 100},
          {"title":"简单描述", "dataIndex":"shortDesc", "key":"shortDesc"},
          {"title":"附件", "dataIndex":"attachment", "key":"attachment", width: 80},
          {"title":"步骤说明", "dataIndex":"desc", "key":"desc"},
          {"title":"操作", "dataIndex":"operation", "key":"operation", width: 60},
        ],
      }
    },
    methods: {
        submit: function () {
            console.log("Submit...");
        },
        cancel: function () {
            this.$router.push('/solutionMgr');
        }
    }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }

  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-left: 50px;
    margin-right: 50px;
  }
  .formGrid {
    /* background-color: orange; */
    margin-top: 15px;
    height: 35px;
    line-height: 35px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */
</style>

